﻿<%@ page contentType="text/html; charset=utf-8" %>

	<link rel="stylesheet" type="text/css" href="<c:url value='/js/chinamap/style.css' />">
	<script type="text/javascript" src="<c:url value='/js/chinamap/raphael-min.js' />"></script>
	<script type="text/javascript" src="<c:url value='/js/chinamap/chinamap.js' />"></script>

	<script type=text/javascript>
		//预留作为初始化打开显示的省份
		var current = null;
	</script>

	<style>
	#ChinaMap {
		PADDING-RIGHT: 10px;
		PADDING-LEFT: 10px;
		PADDING-BOTTOM: 10px;
		MARGIN: 0px auto;
		WIDTH: 560px;
		PADDING-TOP: 10px;
		POSITION: relative;
		TEXT-ALIGN: center
	}

	#tiplayer {
		PADDING-RIGHT: 5px;
		PADDING-LEFT: 5px;
		Z-INDEX: 1000;
		MIN-HEIGHT: 1em;
		BACKGROUND: #000;
		MAX-WIDTH: 250px;
		PADDING-BOTTOM: 5px;
		FONT: 12px 'Microsoft YaHei', Arial, 宋体, Tahoma, Sans-Serif;
		COLOR: #fff;
		PADDING-TOP: 5px;
		POSITION: absolute;
		TEXT-ALIGN: left;
		WORD-WRAP: break-word;
		-moz-border-radius: 3px;
		-khtml-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px
	}

	#ToolTip {
		PADDING-TOP: 5px;
		PADDING-RIGHT: 15px;
		PADDING-LEFT: 15px;
		PADDING-BOTTOM: 5px;
		BORDER-RIGHT: #c5b270 1px solid;
		BORDER-TOP: #c5b270 1px solid;
		BORDER-LEFT: #c5b270 1px solid;
		BORDER-BOTTOM: #c5b270 1px solid;
		Z-INDEX: 1000;
		MIN-HEIGHT: 1em;
		COLOR:#bb861c;
		BACKGROUND: #fffbd6;
		MAX-WIDTH: 400px;
		FONT: 12px 'Microsoft YaHei', Arial, 宋体, Tahoma, Sans-Serif;
		POSITION: absolute;
		TOP: -20px;
		left:-160px;
		TEXT-ALIGN: left;
		LINE-HEIGHT: 22px;
		WORD-WRAP: break-word;
		-moz-border-radius: 3px;
		-khtml-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}

	</style>

	<body class=yui-skin-sam>
		<div class=demo id=doc>
			<div id=bd>
				<div id=ChinaMap>
					<c:if test="${adminDivLevelDeep == 1}">
						<div id=ToolTip>
							  ${storeOpeningRatesNationwide.adminDivAreaName}&nbsp;计划开店数:${storeOpeningRatesNationwide.plannedQuantityOfStoreOpening} / 实际开店数:${storeOpeningRatesNationwide.actualQuantityOfStoreOpening}&nbsp;(开店率:${storeOpeningRatesNationwide.percentValueFormatted})<br/>
						</div>
					</c:if>
					<c:if test="${adminDivLevelDeep != 1}">
						<div id=ToolTip>
							<c:forEach var="sor" items="${storeOpeningRates}" varStatus="status">
							  ${sor.adminDivAreaName}&nbsp;计划开店数:${sor.plannedQuantityOfStoreOpening} / 实际开店数:${sor.actualQuantityOfStoreOpening}&nbsp;(开店率:${sor.percentValueFormatted})<br/>
							</c:forEach>
						</div>
					</c:if>
				</div>
		<div></div>
		<script src="<c:url value='/js/chinamap/codepress.js' />" type=text/javascript></script>
	</body>

<script type="text/javascript">
var china = {};
	$(document).ready(function() {
		var R = Raphael("ChinaMap", 560, 470);//TODO jay:大小与原矢量图绑死, 无法自适应
		var attr = {
			"fill": "#f5f5f5",
			"stroke": "#ddd",
			"stroke-width": 1,
			"stroke-linejoin": "round"
		};
		china = staticChinamap(R, attr);

		var ToolTip = $('#ToolTip');
		//ToolTip.html('地图绘制成功').delay(1500).fadeOut('slow');
		$('body').append("<div id='tiplayer' style='display:none'></div>");
		var tiplayer = $('#tiplayer');
		for (var state in china) {
			var area = china[state]['area'];
			//对各省市区域进行着色
			//china[state]['path'].color = Raphael.getColor(0.9);
			if (area == '1') {//东区
				china[state]['path'].attr("fill", "rgb(0, 176, 80)");
				//china[state]['path'].text(10, 10, china[state]['name']);
			} else if (area == '2') {//南区
				china[state]['path'].attr("fill", "rgb(112, 48, 160)");
			} else if (area == '3') {//西区
				china[state]['path'].attr("fill", "rgb(255, 192, 0)");
			} else {//北区
				china[state]['path'].attr("fill", "rgb(0, 176, 240)");
			}
			(function (st, state) {
				$(st[0]).css('cursor','pointer');
				//write tip
				$(st[0]).hover(function(e){
					var _ST = this;
					if(e.type == 'mouseenter'){
						//tiplayer.text(china[state]['name']).css({'opacity':'0.75','top':(e.pageY+10)+'px','left':(e.pageX+10)+'px'}).fadeIn('normal');
						var area = china[state]['area'];
						var areaTxtShow = "";
						if (area == '1') {
							areaTxtShow = "东区 [";
						} else if (area == '2') {
							areaTxtShow = "南区 [";
						} else if (area == '3') {
							areaTxtShow = "西区 [";
						} else {
							areaTxtShow = "北区 [";
						}
						tiplayer.text(areaTxtShow + china[state]['name'] + "]").css({'opacity':'0.75','top':(e.pageY+10)+'px','left':(e.pageX+10)+'px'}).fadeIn('normal');
					}else{
						if(tiplayer.is(':animated'))tiplayer.stop();
						tiplayer.hide();
					}
				});

				$(st[0]).click(function(e){
					//mark Province
// 					current && china[current]['path'].animate({fill: "#f5f5f5", stroke: "#ddd"}, 500);
// 					st.animate({fill: st.color, stroke: "#eee"}, 500);
//					st.toFront();
					R.safari();
					current = state;

					//do something
					if(china[current] === undefined)return;
					//ToolTip.html('您选中了'+china[current]['name']).fadeIn('fast');
					if(china[current]['url']){
						if(window.confirm('确定要进入 '+china[current]['name']+' 吗?')){
							var provinceAdCode = china[current]['code'];
							window.location = "<c:url value='/report/storeOpeningRate/reportList/1/"+provinceAdCode+".html' />";
						} else {
							return false;
						}
					}
				});

        china[state].label.hover(
          function(e) { // mouse in
            var area = china[state]['area'];
            var areaTxtShow = '';
            switch (area) {
              case '1': areaTxtShow = "东区 ["; break;
              case '2': areaTxtShow = "南区 ["; break;
              case '3': areaTxtShow = "西区 ["; break;
              case '4': areaTxtShow = "北区 ["; break;
            }
            tiplayer.text(areaTxtShow + china[state]['name'] + "]").css({'opacity':'0.75','top':(e.pageY+10)+'px','left':(e.pageX+10)+'px'}).fadeIn('normal');
          },
          function() { // mouse out
            if(tiplayer.is(':animated')) tiplayer.stop();
            tiplayer.hide();
          }
        );
        china[state].label.click(function(){
//          st.toFront();
          R.safari();
          current = state;
          if(china[current] && china[current]['url']){
            if(window.confirm('确定要进入 '+china[current]['name']+' 吗?')){
              var provinceAdCode = china[current]['code'];
              window.location = '<c:url value="/report/storeOpeningRate/reportList/1/' + provinceAdCode + '.html"/>';
            } else {
              return false;
            }
          }
        });

			})(china[state]['path'], state);
		}
	});

</script>
